<template>
  <div>
    <div id="mapCon" style="width: 100%; height: 100%; position: absolute;">
      <span id="mouse-position"></span>
      <!-- 查询容器界面 -->
      <div class="bar" id="bar">
        <el-form :inline="true" :model="requireinfo" class="demo-form-inline">
          <el-form-item label="游客位置：">
            <el-input v-model="requireinfo.lng" placeholder="请输入经度" id="lng" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="requireinfo.lat" placeholder="请输入纬度" id="lat" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="查询半径：">
            <el-input v-model="requireinfo.radius" placeholder="请输入查询半径" id="radius" style="width:200px">
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-zoom-in" @click="dataQueryBtn" size="medium" style="margin-left: 20px">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh-right" @click="dataResetBtn" size="medium">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-s-data" @click="del_content" size="medium">分析</el-button>
            <hb-dialog :title="textObj.title" :visible.sync="textObj.visible" :text="textObj.text" :center="textObj.center" @submit="del_text">
            </hb-dialog>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询结果界面空间分析 -->
      <div class="spatial-resultBox" v-drag v-show="resultBoxShow" style="width: 888px">
        <dv-border-box-8 :key="dvKey">
          <el-card>
            <div style="overflow: hidden; user-select: none">
              <span style="float: left; font-size: 24px; line-height: 36px;">周边住宿查询结果</span>
              <span style="float: right" @click="resultBoxClose">
                <i class="iconfont icon-close" style="font-size: 28px; line-height: 42px; margin-left: 8px;"></i>
              </span>
              <span style="float: right" @click="resultTableChange">
                <i :class="resultTableShow ? 'iconfont icon-shangjiantou' : 'iconfont icon-xiajiantou'" style="font-size: 28px; line-height: 42px">
                </i>
              </span>
            </div>
            <div v-show="resultTableShow">
              <el-table :data="resultData" height="388" :empty-text="tableEmptyText">
                <el-table-column prop="name" label="场所名称" width="140"> </el-table-column>
                <el-table-column prop="address" label="地址" width="160"> </el-table-column>
                <el-table-column prop="tel" label="联系电话" width="150"> </el-table-column>
                <el-table-column prop="longitude" label="经度" width="100"> </el-table-column>
                <el-table-column prop="latitude" label="纬度" width="100"> </el-table-column>
                <el-table-column prop="type" label="类别" width="100"> </el-table-column>
                 <el-table-column
                        fixed="right"
                        label="操作"
                        width="60">
                        <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" icon="el-icon-location"></el-button>
                        </template>
                    </el-table-column>
              </el-table>
              <div class="block" style="margin-top:8px">
                <el-pagination @size-change="tableSizeChange" @current-change="tableCurrentChange" :current-page.sync="tableCurrentPage"
                  :page-sizes="[5, 10, 20]" :page-size.sync="tablePageSize" layout="total, sizes, ->, prev, pager, next, jumper" :total="tableTotal">
                </el-pagination>
              </div>
            </div>
          </el-card>
        </dv-border-box-8>
      </div>
    </div>

  </div>
</template>


<script src="./accommodation.js"></script>

<style src="./accommodation.scss" lang="scss" scoped></style>

<style lang="scss" scoped>
::v-deep .el-input__inner::placeholder {
  color: #add8e6;
}
</style>